<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue路由</title>
</head>
<body>
<div id="app">

    <h1>{{msg}}</h1>
    <!--    路由链接-->
    <router-link to="/products">商品管理</router-link>
    <router-view></router-view>

</div>
</body>
</html>
<template id="products">
    <div><h3>商品列表</h3>
        <a href="#/products/add">添加商品信息</a>
        <table border="1">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>生产日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>超短裙</td>
                <td>24.24</td>
                <td>2021-02-03</td>
                <!--                <td><a href="">删除</a> <a href="#/products/edit">修改</a></td>-->
                <td><a href="">删除</a> <a href="javascript:;" @click.prevent="editRow({id:1,name:'小陈'})">修改</a></td>
            </tr>
        </table>
        <router-view></router-view>
    </div>
</template>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    const products = {
        template: "#products",
        methods: {
            editRow(user) {
                console.log(user)
                this.$router.push({path: '/products/edit', query: user})//切换路径,使用query
            }
        }
    };
    //创建添加商品信息的子组件
    const add = {
        template: "<div><form action=''>商品名称: <input type='text'><br> 商品价格: <input type='text'><br> <input type='button' value='保存商品'></form></div>"
    };
    //创建修改子组件
    const edit = {
        template: "<div><form action=''>商品名称: <input type='text' v-model='user.name'><br> 商品价格: <input type='text' v-model='user.id'><br> <input type='button' value='修改商品'></form></div>",
        data() {
            return {
                user:{}
            };
        },
        methods:{

        },
        created(){
            console.log("edit",this.$route.query)
            this.user = this.$route.query;
        }

    };

    const router = new VueRouter({
        routes: [
            {path: "/", redirect: '/products'},
            {
                path: '/products',
                name: 'products',
                component: products,
                children: [//定义子路由 path属性不能使用"/"开头
                    {path: "add", component: add},
                    {path: "edit", component: edit}
                ]
            }
        ]
    });
    const app = new Vue({
        el: "#app",
        data: {
            msg: "vue中的嵌套路由使用"
        },
        methods: {},
        computed: {},
        components: {},
        router,
    })
</script>
